<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .checked{position: relative;width: 30px;height: 20px;display: inline-block;}
    .checked span{position: absolute;width: 10px;height:20px;border-radius: 5px 5px 0 0;}

    .checked[data-checked] span{background: #ccc;}
    .checked[data-checked="checked"] span{background: red;}

    .checked span:nth-child(1){transform: translate(8px,0) rotate(45deg);}
    .checked span:nth-child(2){transform: rotate(-45deg);}
  </style>
</head>
<body>
  <form>
    用户名：<input type="text"><br>
    密码：<input type="text"><br>
    <div class="checked" data-checked="">
      <span></span>
      <span></span>
    </div>
    是否记住账号密码
    <input type="button" value="登录" class="login">
  </form>
  <br>
  
  <br>
  <form>
    你的爱好是：<input type="checkbox" name="hobby" value="篮球">篮球<input type="checkbox" name="hobby" value="唱歌">唱歌<input type="checkbox" name="hobby" value="跳舞">跳舞<br>
    <input type="submit" value="确认">
  </form>
</body>
<script>
  var checked = document.querySelector(".checked");
  var login = document.querySelector(".login");

  // 给自定义复选框容器，绑定状态（初始状态为false，表示未选中）
  checked.state = false;
  // 点击自定义复选框（模拟真实复选框的点击切换）
  checked.onclick = function(){
    // 判断当前状态
    if(checked.state){
      // 如果当前状态为true，表示当前选中
      // 本次要执行取消的功能，同时切换状态为取消状态
      checked.dataset.checked = "";
      checked.state = false;
    }else{
      // 如果当前状态为false，表示当前未选中
      // 本次要执行选中的功能，同时切换状态为选中状态
      checked.dataset.checked = "checked";
      checked.state = true;
    }
  }
  // 测试能否获取到单个复选框的选中状态
  login.onclick = function(){
    console.log(checked.state);
  }

  // 使用div+css+js模拟：单个复选框的选中和取消效果
  // 使用div+css+js模拟：多个复选框的选中了哪些项的效果


  // 下一个文件，实现多个复选框选中了哪些项的效果
  

  
</script>
</html>